<template>
  <div class="cart">
    <Header title="购物车" :edit="true" ></Header>
    <CartDetail v-if="isShow" :changeShow="changeShow"></CartDetail>
    <Empty v-else></Empty>
    <Footer></Footer>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import Empty from "../../components/Empty.vue";
import Footer from "../../components/footer.vue";
import Header from "../home/components/Header.vue"
import CartDetail from "./components/CartDetail.vue";
import { useCartStore } from "../../store/CartSore";
const isShow=ref(true)
const cartStore=useCartStore()
const init=()=>{
  if(cartStore.cartList.length===0){
    isShow.value=false
  }
}
const changeShow=()=>{
  isShow.value=false
}
onMounted(()=>init())
</script>

<style scoped lang="less">
.cart {
  display: flex;
  flex-flow: column;
  height: 100%;
  .content {
    flex: 1;
    overflow-y: auto;
  }
}
</style>
